<template>
  <div
    class="panel-poi"
    v-show="visible"
    :style="{
      opacity: props.data.attr.alpha / 100,
      width: props.data.attr.width + 'px',
      height: props.data.attr.height + 'px',
    }"
    :class="{ editable: props.data.layerName === sceneStore.divEditLayerName }"
    @click.stop="layerClick"
  >
    <div class="panel-poi-wrap">
      <div class="title-wrap">
        <!-- <img
          v-if="props.data.effect.moduleName.indexOf('用电量') > -1"
          src="@/assets/png/icon3.png"
          alt=""
        />
        <img v-else src="@/assets/png/icon4.png" alt="" /> -->
        <div class="title">{{ fieldValue.field1 }}</div>
      </div>
      <div class="unit-wrap">
        <!-- 指标 -->
        <div class="norm">{{ fieldValue.field2 }}</div>
        <!-- 单位 -->
        <div class="unit">{{ fieldValue.field3 }}</div>
      </div>
      <div class="value">{{ fieldValue.field4 }}</div>
    </div>
    <SvgIcon class="left-top" icon-class="左上"> </SvgIcon>
    <SvgIcon class="left-bottom" icon-class="左下"> </SvgIcon>
    <SvgIcon class="right-top" icon-class="右上"> </SvgIcon>
    <SvgIcon class="right-bottom" icon-class="右下"> </SvgIcon>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { SvgIcon } from '@jl/common';
import { divLayerClickCallback } from '@/service';

defineOptions({
  name: 'PanelPoi',
});

interface IProps {
  data: any;
}
const props = withDefaults(defineProps<IProps>(), {
  data: null,
});

const sceneStore = useSceneStore();
// const field1Value = computed(() => {
//   if (!props.data.effect.dataMapping.field1 || !props.data.effect.requestData.length) return '';
//   const targetField = props.data.effect.requestData.filter((item: any) => {
//     return item.label === props.data.effect.dataMapping.field1;
//   });
//   return targetField.length ? targetField[0].value : '';
// });

// const field2Value = computed(() => {
//   if (!props.data.effect.dataMapping.field2 || !props.data.effect.requestData.length) return '';
//   const targetField = props.data.effect.requestData.filter((item: any) => {
//     return item.label === props.data.effect.dataMapping.field2;
//   });
//   return targetField.length ? targetField[0].value : '';
// });

/**
 * field1 名称
 * field2 指标
 * field3 单位
 * field4 值
 */
const fieldValue = computed(() => {
  const obj = {
    field1: '',
    field2: '',
    field3: '',
    field4: '',
  } as any;
  if (!Object.keys(props.data.effect.dataMapping).length || !props.data.effect.requestData.length)
    return obj;
  props.data.effect.requestData.forEach((v: any) => {
    Object.keys(obj).forEach((key) => {
      if (props.data.effect.dataMapping[key] && v.label === props.data.effect.dataMapping[key]) {
        obj[key] = v.value;
      }
    });
  });
  return obj;
});

const visible = computed(() => {
  return props.data.show && sceneStore.mapCameraHeight < 400;
});

function layerClick() {
  sceneStore.divEditLayerName = props.data.layerName;
  divLayerClickCallback(props.data.layerName);
}
</script>

<style lang="less" scoped>
.panel-poi {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  overflow: hidden;
  &-wrap {
    // min-width: 267px;
    // height: 202px;
    height: 100%;
    background: fade(#000000, 68%);
    border: 1px solid #08e1ed;
    padding: 28px 35px;
    .title-wrap {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .title {
        // margin-left: 10px;
        font-size: 26px;
      }
    }
    .unit-wrap {
      display: flex;
      align-items: baseline;
      font-size: 20px;
      margin-bottom: 3px;
      .unit {
        font-size: 14px;
        margin-left: 15px;
        color: #999;
      }
    }
    .value {
      color: #06e1ed;
      font-size: 42px;
      font-weight: bold;
    }
  }
  .left-top,
  .left-bottom,
  .right-top,
  .right-bottom {
    position: absolute;
    font-size: 24px;
    margin-right: 0px;
  }
  .left-top {
    left: 0;
    top: 0;
  }
  .left-bottom {
    left: 0;
    bottom: 0;
  }
  .right-top {
    right: 0;
    top: 0;
  }
  .right-bottom {
    right: 0;
    bottom: 0;
  }
}
</style>
